<script setup>
import { getTreeTradeCategoryApi, refreshTradeCategoryApi } from "@/api/tradeGoods";
import $bus from "../../utils/bus";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
// ---------------------------------------------------------------------获取查询刷新---------------------------------------------------------------------
const dataList = ref([]);
const getData = async () => {
  const res = await getTreeTradeCategoryApi();
  dataList.value = res.data;
};
const getPage = () => {
  getData();
};
const clear = () => {
  getData();
};
const refresh = async () => {
  const res = await refreshTradeCategoryApi();
  ElMessage({
    message: res.data,
    type: "success",
  });
};
//---------------------------------------------------------------------获取标题事件---------------------------------------------------------------------
const titleData = ref({
  titleFir: "贸易数据",
  titleSec: "商品信息",
});
onMounted(() => {
  $bus.emit("title-info", titleData.value);
  getData();
});
</script>

<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getPage()">查询</el-button>
        <el-button icon="RefreshRight" type="info" @click="clear()">重置</el-button>
        <el-button icon="Edit" type="danger" @click="refresh()">刷新</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <el-table :data="dataList" stripe fit   row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" scrollbar-tabindex>
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column width="55" type="index" label="序号"></el-table-column>
      <el-table-column label="分类名称" prop="categoryName"></el-table-column>
      <el-table-column width="55" label="排序" prop="categorySort"></el-table-column>

      <!-- <el-table-column fixed="right" width="150" label="操作">
        <template #default="data">
          <el-button icon="Edit" link type="success" size="small" @click="update(data.row.id)">修改</el-button>
          <el-button icon="Delete" link type="danger" size="small" @click="del(data.row.id)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </el-card>
</template>

<style scoped lang="scss"></style>
